@include('backstage/public/_header')
    <style>
    .imgbox{
        width:420px;
    }
    .none{
        width: 0px;
        height: 0px;
        display: none;
    }
    .del_icon {
        position: absolute;
        width: 20px;
        right: 0;
        top: 0;
    }
    </style>
    <div class="result_wrap">
        <div class="result_title">
            <div class="mark">
                <p>帶<i class="require">*</i>為必填項</p>
            </div>
        </div>
        <form id="form_data">
            {{csrf_field()}}
            <input type="hidden" name="id" value="{{$pro->id}}">
            <table class="add_tab">
                <tbody>
                    <tr>
                        <th width="120"><i class="require">*</i>分類：</th>
                        <td>
                            <select name="type_id" id="type_id">
                                <option value="">==請選擇==</option>
                                @foreach ($cate as $v)
                                    <option value="{{$v->id}}" {{ $pro->type_id==$v->id ? 'selected' : '' }} > {{ $v->type_name }} </option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>產品名稱：</th>
                        <td>
                            <input type="text" class="lg" name="name" id="name" value="{{$pro->name}}" >
                            <p>產品名稱可以寫30個字</p>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>產品重量：</th>
                        <td>
                            <input type="text" class="lg" name="weight" id="weight" value="{{$pro->weight}}">
                            <p style="color:darkred">產品可能的重量範圍</p>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>產品價格：</th>
                        <td>
                            <input type="text" class="lg" name="price" id="price" value="{{$pro->price}}">
                            <p style="color:darkred">產品可能的價格範圍,數字大於3位數時每三位數用“,”隔開</p>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>產品調價：</th>
                        <td>
                            <input type="text" onkeyup="value=value.replace(/[^\d{1,}\-\.\d{1,}|\d{1,}]/g,'')" class="lg" name="offset" id="offset" value="{{$pro->offset}}">
                            <p style="color:darkred">只能是數字</p>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>保證金：</th>
                        <td>
                            <input type="text" onkeyup="value=value.replace(/[^\d{1,}\-\.\d{1,}|\d{1,}]/g,'')" class="lg" name="deposit" id="deposit" value="{{$pro->deposit}}">
                            <p style="color:darkred">只能是數字，單位HK,數字大於3位數時每三位數用“,”隔開</p>
                        </td>
                    </tr>
                    <tr>
                        <th>產品屬性：</th>
                        <td>
                            <label for=""><input type="radio" value="0" name="set" checked="checked">普通</label>
                            <label for=""><input type="radio" value="1" name="set">跳轉</label>
                        </td>
                    </tr>
                    <tr>
                        <th>跳轉地址：</th>
                        <td>
                            <input type="text" name="url" value="{{$pro->url}}">
                            <span color="darkred"><i class="fa fa-exclamation-circle yellow"></i>僅在產品屬性為跳轉時有效</span>
                        </td>
                    </tr>
                    <tr>
                        <th>產品圖：<br/><span style="font-size:12px;color: #666;">(推薦大小600*600px)</span></th>   
                        <td>
                            <div class="none">
                                <input type="file" id="art_img" name="art_img[]" accept="image/gif,image/png,image/jpeg"/>
                            </div>
                            <div class="imgbox">
                                <span style="float:left;">
                                                  <div id="imgdiv" style="text-align:left; clear:both; overflow:hidden;height:100px;">
                                                    @if(count($pro_imgs)!=0)
                                                      @foreach($pro_imgs as $img)
                                                        <span id="img_{{$img->id or '-1'}}" style="float:left;position:relative;margin:0;">
                                                          <a href="http://{{$_SERVER['SERVER_NAME'].$img->img_url}}" target="_blank">
                                                            <img src="http://{{$_SERVER['SERVER_NAME'].$img->img_url}}" width="100" height="100"/>
                                                          </a>
                                                          <img class="del_icon" src="/backstages/style/img/delete.png" alt="刪除" title="刪除" onclick="delimgs({{$img->id or '-1'}})" />
                                                        </span>
                                                      @endforeach
                                                    @endif
                                                    <span class="_box2" style="margin:0;float: right;">
                                                      <a href="JavaScript:void(0);" onclick="addimg()">
                                                        <img src="/backstages/style/img/add.png" alt="添加" title="添加" style="width:100px;">
                                                      </a>
                                                    </span>
                                                  </div>
                                                </span>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <th>排序：</th>
                        <td>
                            <input type="text" onkeyup="value=value.replace(/[^\d{1,}\-\d{1,}|\d{1,}]/g,'')" name="sort_order" maxlength="3" id="sort_order" placeholder="0" value="{{$pro->sort_order}}">
                            <p>只能是數字</p>
                        </td>
                    </tr>
                    <tr>
                        <th>是否上架：</th>
                        <td>
                            <label for=""><input type="radio" value="0" name="is_show" @if($pro->is_show==0) checked="checked" @endif>否</label>
                            <label for=""><input type="radio" value="1" name="is_show" @if($pro->is_show==1) checked="checked" @endif>是</label>
                        </td>
                    </tr>
                    <tr>
                        <th>描述：</th>
                        <td>
                            <textarea name="info" id="info">{{$pro->info}}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>（發貨/退貨）說明：</th>
                        <td>
                            <textarea name="refund" id="refund">{{$pro->refund}}</textarea>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>內容：</th>
                        <td>
                            <div style="width: 50%;float: left;">
                                <iframe class="lg" id="preview" style="min-width:640px; min-height:360px;margin-top: 10px;" ></iframe>
                                <p style="line-height: 5px;">這裏顯示內容</p>
                            </div>
                            <div style="width: 50%;float: left;">
                                <textarea class="lg" name="content" id="content" style="min-width:640px; min-height:360px;padding: 1px;">{{$pro->content}}</textarea>
                                <p>這裏修改內容</p>
                            </div>
                        </td>
                    </tr>
                    <!-- <tr>
                        <th></th>
                        <td>
                            <input type="button" value="提交" id="btnSub" onclick="onSubmit();">
                            <input type="button" class="back" onclick="history.go(-1)" value="返回">
                        </td>
                    </tr> -->
                </tbody>
            </table>
            <div class="btn_group">
                <input type="button" value="提交" id="btnSub" onclick="onSubmit();">
                <input type="button" class="back" onclick="history.go(-1)" value="返回">
            </div>
        </form>
        <div class="tips">
            <h3>修改產品說明</h3>
            <p>1、帶<i class="require">*</i>為必填項，不允許為空</p>
            <p>2、圖片上傳只允許".png", ".jpg", ".jpeg", ".gif", ".bmp"，文件大小不超過2M</p>
            <p>3、填充產品表，記錄產品id</p>
            <p>4、點擊提交 -&gt; 添加產品，返回-&gt; 可以回到產品列表</p>
        </div>
    </div>
    
    <script type="text/javascript">
    $('#content').bind('input propertychange', function(){
        var val = $('#content').val();
        $(document.getElementById('preview').contentWindow.document.body).html(val);
    });
    $('#content').trigger("input");

    $('#art_img').click(function(){

        document.getElementById('art_img').value= '';

        $('.hrefimg').remove();

        $("#thume").show();

    });

    // $('#art_img').change(function(){

    //     var arrf = document.getElementById('art_img').files;
    //     // console.log(arrf.length);
    //     // alert(arrf.length);
    //     var s = '';
    //     len=arrf.length;
    //     for(var i=0;i<len;i++){
    //         var url = window.URL.createObjectURL(arrf[i]);
    //         s = '<a class="hrefimg" id="img_'+i+'" target="_blank" href="'+url+'"><img class="srcimg" src="'+url+'" height="100" alt="圖片預覽" /></a>';
    //         $(".imgdiv").append(s);
    //     }

    //     if($('#imgfile').val()==""){

    //         $(".hrefimg").remove();

    //         $("#thume").show();

    //     }else{

    //         $(".hrefimg").show();

    //         $("#thume").hide();

    //     }

    // });
    var vfTime = 2;
    var timer=null;
    function setTime(){
        vfTime --;
        if(vfTime<=0){
            vfTime = 0;
            clearInterval(timer);
        }
    }

    function onSubmit(){
        var type_id=$("#type_id").val();
        var name = $("#name").val();
        var content = $("#content").val();
        if (vfTime!=0 && timer!=null){
            layer.msg('操作過於頻繁', {icon: 7,anim: 6});
            // setTimeout(function(){$("#chiContent").focus();}, 1500);
            return false;
        }
        if (type_id==''){
            layer.msg('請選擇產品分類', {icon: 5,anim: 6});
            // setTimeout(function(){$("#chiContent").focus();}, 1500);
            return false;
        }
        if (name=='') {
            layer.msg('產品名稱不能為空', {icon: 5,anim: 6});
            setTimeout(function(){$("#title").focus();},0);
            return false;
        }
        if (content=='') {
            layer.msg('產品詳情不能為空', {icon: 5,anim: 6});
            setTimeout(function(){$("#content").focus();},0);
            return false;
        }
        var form = new FormData(document.getElementById("form_data"));
        // console.log(form);
//             var req = new XMLHttpRequest();
//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//             req.send(form);
        $.ajax({
            url:"{{$doedit}}",
            type:"post",
            data:form,
            processData:false,
            contentType:false,
            dataType : "json",
            success:function(data){
                if(data.status==1){
                    layer.msg(data.message, {icon: 6});
                    setTimeout(function(){
                        window.location.href=data.jumpUrl;
                    },2000);
                }else if(data.status==-1){
                    layer.alert(data.message, {icon: 2,anim:6});
                }else{
                    layer.msg(data.message, {icon: 5});
                }
                clearInterval(timer);
                timer = setInterval(setTime, 1000, "1");
                
            },
            error:function(e){
                layer.msg(e, {icon: 5,anim: 6});
                clearInterval(timer);
                timer = setInterval(setTime, 1000, "1");
            }
        });
    }
    function change(id){
        $("#img_"+id).show();
        var i = document.getElementById('imgdata_'+id).files[0];
        var src = window.URL.createObjectURL(i);
        document.getElementById('timg_'+id).src = src;
        document.getElementById('aimg_'+id).href = src;
    }
    function delimgs(id){
        layer.confirm('刪除後不可恢復，確定要刪除嗎?', {
          btn: ['確定','取消'] //按鈕
        }, function(){
          $.ajax({
            url:'/backstage/product/dodel_img',
            data:{'id':id,'_token':"{{csrf_token()}}"},
            timeout:3000,
            cache:false,
            type:'post',
            dataType:'json',
            success:function(data){
                layer.closeAll('loading');
                if(data.status==1){
                    layer.msg(data.message, {icon: 6});
                    setTimeout(function(){
                        window.location.href = window.location.href;
                    },2000);
                }else if(data.status==-1){
                    layer.alert(data.message, {icon: 2,anim:6});
                }else{
                    layer.msg(data.message, {icon: 5});
                }
            }
          });
        }, function(){});
    }
    // 增加圖片
    function addimg(){
        var i = $('#imgdiv a img').length;
        var myDate = new Date();
        var ind = -myDate.getMilliseconds();
        var indval = $("#imgdiv>span>div[class='none']>input").last().val();
        // alert(indval);
        if(indval == undefined || indval !=''){
            var s='';
            s+='<span id="img_'+ind+'" style="display: none;float:left;position:relative;margin:0;">';
            s+='<div class="none">';
            s+='<input type="file" id="imgdata_'+ind+'" name="art_img[]" onchange="change('+ind+')" accept="image/gif,image/png,image/jpeg"/>'
            s+='</div>';
            s+='<a id="aimg_'+ind+'" href="" target="_blank">';
            s+='<img id="timg_'+ind+'" src="" width="100" height="100" />';
            s+='</a>';

            s+='</span>';
            $('._box2').before(s);
            $("#imgdata_"+ind).click();
            if(i>=5){
                $('._box2').hide();
            }
        }else{
            $("#imgdiv>span>div[class='none']>input").last().click();
        }
        
    }
    </script>
@include('backstage/public/_footer')